<template>
  <div>
    <!--条件筛选-->
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" labelWidth="110" @filterChange="changeHandle"
               @onCollapse="collapseHandle"></TopFilter>
    <!-- table -->
    <FilterTable
      ref="table"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :isSelectColumn="false"
      :onColumnsChange="columns => this.columns = columns">
      <template slot="controls">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="detailHandle(null,'add')">新增</el-button>
      </template>
    </FilterTable>
    <!-- 新增编辑窗口 -->
    <Drawer :visible.sync="visibleDrawer" :title="dialogTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <returnInfo v-model="initData" @close="closeHandler"/>
    </Drawer>

    <!-- 明细窗口 -->
    <Drawer :visible.sync="infoDrawer" :title="infoTitle" destroyOnClose width="90%"
            :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <detailInfo v-model="infoData" @close="closeInfoHandler"/>
    </Drawer>

  </div>
</template>

<script>
  import {getReturnInfo,saveReturnInfo} from '@/api/partsmanage/saleReturnManage/index';
  import returnInfo from './returnInfo';
  import { dictionary } from '@/utils/dictMixin';
  import detailInfo from '../returnQuery/detailInfo';

    export default {
      name: "returnApply",
      components: {returnInfo,detailInfo},
      mixins: [dictionary],
      data() {
        return{
          topFilterList: this.createTopFilterList(),
          columns: this.createTableColumns(),
          fetchApi: getReturnInfo,
          fetchParams: { xhrAbort: true },
          visibleDrawer: false,
          handleType: '',
          formData: {},
          title: '配件信息',
          infoTitle: '',
          dialogTitle: '',
          infoDrawer: false,
          initData: {},
          infoData: {}
        };
      },
      methods: {
        createTopFilterList() {
          return[
            {
              type: 'INPUT',
              label: '退货单号',
              fieldName: 'bkxtdh'
            },
            {
              type: 'INPUT',
              label: '采购单号',
              fieldName: 'bkysdj'
            },
            {
              type: 'INPUT',
              label: '经办人',
              fieldName: 'bkjbry'
            },
            {
              type: 'SELECT',
              label: '退货类型',
              fieldName: 'bkthlx',
              placeholder: '请选择',
              itemList: this.createDictList('5004')
            },
            {
              type: 'RANGE_DATE',
              label: '创建日期',
              initialValue: '',
              fieldName: 'startTime|endTime',
              valueFormat: 'yyyy-MM-dd',
              placeholder: '请选择'
            },
            {
              type: 'SELECT',
              label: '退货单状态',
              fieldName: 'bkxtzt',
              placeholder: '请选择',
              itemList: this.createDictList('5005')
            },
          ]
        },
        createTableColumns () {
          return [
            {
              title: '操作',
              dataIndex: 'column-action',
              width: 150,
              fixed: 'left',
              render: props => {
                return (
                  <div>
                  <el-button disabled={(props.row.bkxtzt===50051001||props.row.bkxtzt===50051003)? false:true} size="mini" type="text" onClick={() => this.detailHandle(props.row, 'edit')}>
                  编辑
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button size="mini" type="text" onClick={() => this.detailInfo(props.row, 'info')}>
                  明细
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button disabled={(props.row.bkxtzt===50051001||props.row.bkxtzt===50051003)? false:true} size="mini" type="text" onClick={() => this.cancleHandle(props.row, 50051004)}>
                    取消
                  </el-button>
                </div>
                );
                // } else if(props.row.bkxtzt===50051002){
                //   return (
                //     <el-button size="mini" type="text" onClick={() => this.detailHandle(props.row, 'edit')}>
                //     编辑
                //     </el-button>
                //   );
              }
            },
            {
              title: '序号',
              dataIndex: 'index',
              width: 70,
              sorter: true,
              render: props => {
                return <span>{props.row.index + 1}</span>;
              }
            },
            {
              title: '退货单号',
              dataIndex: 'bkxtdh',
              sorter: true,
            },
            {
              title: '采购单号',
              dataIndex: 'bkysdj',
              sorter: true,
            },
            {
              title: '退货类型',
              dataIndex: 'bkthlx',
              sorter: true,
              filter: true,
              filterType: 'checkbox',
              filterItems: this.createDictList('5004'),
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.bkthlx, '5004')}</span>;
              }
            },
            {
              title: '退货项目数',
              dataIndex: 'bkthxm',
              sorter: true,
            },
            {
              title: '退货数量',
              dataIndex: 'bkpzsl',
              sorter: true,
            },
            {
              title: '退货总金额',
              dataIndex: 'bkxtze',
              sorter: true,
            },
            {
              title: '退货状态',
              dataIndex: 'bkxtzt',
              sorter: true,
              filter: true,
              filterType: 'checkbox',
              filterItems: this.createDictList('5005'),
              render: props => {    //编码转汉字
                return <span>{this.createDictText(props.row.bkxtzt, '5005')}</span>;
              }
            },
            {
              title: '经办人',
              dataIndex: 'bkjbry',
              sorter: true,
            },
            {
              title: '创建时间',
              dataIndex: 'createdAt',
              sorter: true,
              dateFormat: 'yyyy-MM-dd HH:mm:ss',
              filterType: 'date-range'
            },
          ]
        },
        detailHandle(row,type) {
          if (type === 'edit') {
            this.dialogTitle = '配件退货编辑';
          } else {
            this.dialogTitle = '配件退货新增';
          }
          this.initData =  {
            type: type,
            data: row
          }; //行id
          this.visibleDrawer = true;
        },
        detailInfo(row,type) {
          this.infoTitle = '配件退货信息';
          this.infoData =  {
            type: type,
            data: row
          }; //行id
          this.infoDrawer = true;
        },
        closeInfoHandler(type) {
          this.infoDrawer = false
          if (type === 'refresh') {
            // 重新加载
            this.fetchParams = Object.assign({}, this.fetchParams);
          }
        },
        cancleHandle(row, xsddzt) {
          this.$confirm('您确定要取消吗？取消之后您不可再次操作！', '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async () => {
            const res = await saveReturnInfo({
              id: row.id,
              bkxtzt: xsddzt,
              editType: 'cancel'
            })
            if(res.resultCode == 200) {
              this.$notify.success({title: '提示信息', message: '取消成功'});
              // 重新加载
              this.fetchParams = Object.assign({}, this.fetchParams);
            }
          }).catch(() => {
            console.log('取消')
          });
        },
        closeHandler(type) {
          this.visibleDrawer = false
          if (type === 'refresh') {
            // 重新加载
            this.fetchParams = Object.assign({}, this.fetchParams);
          }
        },
        downloadTemplate() {
          this.$confirm('下载模板', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              window.open('/static/tinymce/template/PartInfos.xls');
              this.$message({
                type: 'success',
                message: '下载成功!'
              });
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              });
            });
        },
        changeHandle(val) {
          val.endTime && (val.endTime = val.endTime.split(' ')[0] + ' 23:59:59');
          this.fetchParams = Object.assign({}, this.fetchParams, val, {xhrAbort: false});
        },
        collapseHandle() {
          this.$nextTick(() => {
            this.BaseTable.EXECUTE_RESET_HEIGHT();
          });
        }
      }
    }
</script>

<style scoped>

</style>
